<template>
	<view class="machine" :style="{background: check ? '#f8f9fd' : '#fff'}">
		<view class="name">
			<view class="content">
				{{machine.name}}
			</view>
			<view v-if='check' class="check">
				当前选择
			</view>
		</view>
		<view class="location">
			<view class="distance">
				<u-icon name="map" color="#c9cace" size="30"></u-icon>
				<view style="color:#000;min-width: 160rpx;" class="text">
					距您{{machine.distance}}km
				</view>
			</view>
			<view style="color: #c9cace;">|</view>
			<view class="address">
				<view class="text">
					{{machine.address}}
				</view>
			</view>
		</view>
		<!-- <view class="time">
			<u-icon name="clock" color="#c9cace" size="28"></u-icon>
			<view class="text">
				{{machine.time}}
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "machine",
		props: {
			machine: {
				type: Object
			},
			value: {
				type: Number
			}
		},
		computed: {
			check() {
				return this.value === this.machine.mid
			}
		}
	}
</script>

<style lang="scss" scoped>
	$text-color: #c9cace;

	.machine {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 28rpx 50rpx;

		.name {
			display: flex;
			font-weight: 900;
			align-items: center;

			.check {
				background-color: #f08571;
				border-radius: 5rpx;
				color: #fff;
				height: 24rpx;
				font-size: 18rpx;
				margin-left: 10rpx;
				font-weight: 400;
				padding: 0 6rpx;
			}
		}

		.location {
			display: flex;

			.distance,
			.address {
				display: flex;
			}

			.address {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.time {
			display: flex;
			font-size: 26rpx;
		}
	}

	.text {
		color: $text-color;
		margin-left: 16rpx;
		margin-right: 16rpx;
	}
</style>